<div [ngClass]="wrapCls" role="alert">
  <h1>Alert Component</h1>
  <span class="content">{{ options.content }}</span>
  <i class="close" (click)="closed()">&times;</i>
</div>

<ng-template>
  <ng-template>
    <p appHighlight highColor="green">ok</p>
    <button
      class="btn btn-success"
      (click)="showUnless = !showUnless"
    >
      Toggle - unless={{showUnless}}
    </button>
    <h1 *appUnless="showUnless; let attr = attr">
      unless测试 --attr: {{attr}}
    </h1>
    <p appHighlight="green">ok</p>
  </ng-template>
  <ng-template>
    <app-tpl-container></app-tpl-container>
  </ng-template>
  <app-view-child></app-view-child>
  <app-content-child>
    <div class="content">
      <app-content-panel></app-content-panel>
      <div classs="shadow">
        <span #span>default content</span>
      </div>
    </div>
    <ul #list>
      <li>first</li>
      <li>second</li>
      <li>third</li>
      <li>fourth</li>
      <li>last</li>
    </ul>
    <ol #list>
      <li>first</li>
      <li>second</li>
      <li>third</li>
      <li>fourth</li>
      <li>last</li>
    </ol>
    <app-content-panel></app-content-panel>
    <app-content-panel></app-content-panel>
    <app-content-panel></app-content-panel>
    <section class="m-auto">
      <app-content-panel></app-content-panel>
      <app-content-panel></app-content-panel>
    </section>
  </app-content-child>
  <app-pipe></app-pipe>
  <section class="m-auto">
    <app-shadow>
      <div class="head bg-primary">header</div>
      <h3 class="bg-info">article part</h3>
      <h2>Main content</h2>
      <p content class="bg-secondary">custom content part</p>
      <div class="foot bg-danger">footer</div>
    </app-shadow>
  </section>
  <section class="m-auto">
    <button class="btn btn-primary btn-large" (click)="showAlert()">show alert</button>
  </section>
</ng-template>
